<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="styles.css">
  <meta name="description" content="网页的简短描述">
</head>
<body>
<canvas width="300" height="300"> 抱歉，你的浏览器不支持 canvas 元素</canvas>
<p>The <code>push()</code> method adds one or more elements</p>
<dialog id="login" class="login2">弹窗内容</dialog>
<button onclick="openDialog()">开启弹窗</button>
<script>
    function openDialog() {
        const dialog = document.querySelector('.login2')
        dialog.showModal();
    }

    // 一个页面，有且只有一个 window 全局变量，窗口，指代当前的页面窗口
    // 一个页面，有且只有一个 document 全局变量，文档，指代当前页面根标签，
    // 是整个页面标签的上下文，可以通过API管理整个页面的标签

    // 浏览器运行环境提供的两个全局变量
</script>

<p>
  Type the following in the Run dialog: <kbd>cmd</kbd><br/>Then click the OK
  button.
</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" name="b" value="50"/> +
  <input type="number" name="a" value="10"/> =
  <output name="result"></output>
</form>
<ul>
  <li>
    <data value="123546">标签</data>
  </li>
</ul>

<input list="saber"/>
<datalist id="saber">
  <option value="archer"></option>
</datalist>

<script>
    function hello() {
        console.log('你好')
    }
</script>

<button onclick="console.log('你好')">点击</button>
<button onclick="hello()">点击</button>

<ol></ol>

<table>
  <thead></thead>
  <tbody></tbody>
</table>

<div>1 1</div>

<q>
  213123
  123
  123
  1245
  123
  1
</q>
<pre>
  123
    457 789
  10 11 12
    13 14 15
</pre>

<ruby>
  常 伴 吾 身
  <rp>(</rp>
  <rt>常常 伴随 我的 身体</rt>
  <rp>)</rp>
</ruby>
<ruby>
  Pinyin or Annotate
  <rp>(</rp>
  <rt>拼音或注解</rt>
  <rp>)</rp>
</ruby>


<p>Regular text. <code>This is sample text.</code> Regular text.</p>

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

<!--一个最基本的标签，包含哪些部分-->
<!-- id、class，是所有标签的通用属性，name是所有表单类型的标签通用属性 -->
<!-- id 身份证号，全局唯一 -->
<!-- class 类：种类、特征，用来给标签归类 -->
<div id="div1" class="header"> content</div>
<div id="div11" class="header"></div>
<div id="div111" class="header"></div>
<div id="div1111" class="header"></div>
<!-- id、class 最主要的作用，是用来给标签，加样式 -->
<!-- 在css中，id、class，被称为选择器 Selector -->
<!-- 在css中，必须通过选择器 Selector，来给指定标签添加样式 -->
<!-- 选择器不仅包含id、class，还可以是标签名，还可以添加属性进行进一步精确筛选 -->
<script>
    document.querySelector(''); // 返回的是一个标签
    document.querySelectorAll(''); // all 全部，返回一组标签
    document.getElementsByTagName(''); // 通过标签名来获取标签，同样返回一组标签

    // template 拿到了js中，修改了内容之后，通过 document.importNode(template.content, true) 来获取模板的副本
    document.body.appendChild(元素); // 追加子标签

    // template 可以复用（重复使用）
    // text 文本 area 区域
    // textarea 文本区域：多行文本输入框
    // input 输入：单行文本输入框
</script>

<!-- 内容模板，微型组件 -->

<textarea placeholder="占位符"></textarea>
<template>

</template>

<time>2:30</time>
<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter>

<ol>
  <li>132265165</li>
  <li>2651032132</li>
</ol>

</body>
</html>